<template>
  <div>
    <el-card>
      <h2>总结</h2>
      <ul>
        <li>实现左侧菜单栏和tag和面包屑联动：点击左侧菜单的时候，将当前点击的对象存储到vuex中currentMenu,触发的是selectMenu函数,面包屑读取vuex中的currentMenu进行渲染, 同时点击菜单需要往tagList中添加当前的菜单对象【先判断是否有该对象，没有就添加进去，如果有就不添加】</li>
        <br />
        <li>封装table：userManger组件使用的是compontent中封装的table组件</li>
        <br />
        <li>
          动态添加路由：在登录的时候一并返回需要渲染的菜单，router.js中只写默认渲染的login/register组件，其余也要需要后台动态返回;
          <pre>
            <p>1. 先读取cookie/localstorage/sessionstorage中是否有存放的菜单</p>
            <p>2. 如果没有return；如果有保存到vuex中</p>
            <p>3. 添加首页Home【注：该页面一定可以展示】
              addMenu = [{
                path: '/',
                component: () => import('@/views/Home.vue'),
                children: []
              }]
            </p>
            <p>4. 遍历返回的菜单数组，如果有children就将children添加到Home的children中,注：component是组件存放的位置
              if (item.children) {
                item.children = item.children.map(item => {
                  item.component = () => import(`@/views/${item.url}`)
                  return item
                })
                addMenu[0].children.push(...item.children)
              }
            </p>
            <p>5. 如果没有children就直接添加当前的组件到Home的children中
              <pre>
                item.component = () => import(`@/views/${item.url}`)
                addMenu[0].children.push(item)
              </pre>
            </p>
            <p>6. 最后添加404页面</p>
            <p>7. 添加动态路由 router.addRoutes(addMenu)</p>
            <p>8. 刷新页面需要重新加载动态菜单数据，可以在app.vue组件中重新获取数据</p>
            <p>注：动态菜单数据必须是写在请求后保存完菜单列表之后才动态添加，否则会出现空白页面，只有刷新才能看到页面内容；</p>
          </pre>
        </li>
        <br>
        <li>登录页实现一天更换一次背景：在登录页面的created钩子函数中添加计算，存放的图片bg00,bg01..,可参考https://github.com/woai3c/vue-admin-template
          <pre>
            created() {
              this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg0' + new Date().getDay() + '.jpg') + ')'
            },
          </pre>
        </li>
        <li>data中加载图片需要require，require('../../assets/imgs/404.jpg')</li>
        <br>
        <li>echarts的封装：分为有坐标轴和无坐标轴的配置，需要初始化图标，初始化数据，而这些数据是由父组件传过来的，监听需要深度监听才能监听到;同时配置echart根据窗口大小实现自适应，即采用echart.resize()方法，在组件mounted时监听resize是否发生变化，发生变化就调用；在离开当前页面的时销毁destroyed监听resize是否发生变化</li>
        <li>全局使用less：需要在vue.config.js文件下配置可以全局使用的内容</li>
      </ul>
    </el-card>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {

    };
  },
}

</script>
<style lang='less' scoped>
h2{
  font-size: 30px;
  text-align: center;
}
</style>